<template>
	<div class="view">
		<!-- 头部 -->
		<div class="header">
			<div class="h_exit" style="cursor: pointer;" @click="to_exit">
				<i class="i-16 i-exit i-mr-10"></i>返回上一页
			</div>
			<div class="h_con">
				<div class="toggle_ul">
					<div class="toggle_li">
						内容管理</div>
				</div>
			</div>
		</div>
		<!-- 头部 end -->

		<!-- 主体部分 -->
		<div class="main">
			<div class="main_con" :style="{ height: conheight + 'px' }">
				<div class="item_box">
					<div class="box_top">
						<div class="box_title">全部内容({{ total }})</div>
						<div class="box_btn">

							<el-cascader v-model="cataId" :options="cataList" style="width: 200px;margin-right: 10px"
								:props="defaultprops" placeholder="请选择目录">
							</el-cascader>
							<el-select v-model="setOption" placeholder="请选择设置" style="width: 200px;margin-right: 10px">
								<el-option v-for="item in options" :key="item.title" :label="item.title"
									:value="item.title">
								</el-option>
							</el-select>
							<el-date-picker v-model="time" type="daterange" range-separator="至" start-placeholder="开始日期"
								end-placeholder="结束日期" value-format="yyyy-MM-dd" style="width: 300px;margin-right: 10px;"
								align="center">
							</el-date-picker>
							<el-input v-model="keywords" style="width: 200px;margin-right: 10px"
								prefix-icon="el-icon-search" placeholder="请输入关键词搜索" @change="search"></el-input>
							<el-button @click="search" type="primary" size="medium">搜索</el-button>
							<el-button icon="el-icon-plus" @click="info_add" type="primary" size="medium">发布内容</el-button>
						</div>
					</div>
					<div class="table">
						<el-table ref="multipleTable" :data="dataList" tooltip-effect="dark" style="width: 100%"
							:height="table_height">
							<el-table-column type="index" label="行号" min-width="5%" align="center">
							</el-table-column>
							<el-table-column prop="title" label="标题" min-width="20%" align="center">
							</el-table-column>
							<el-table-column prop="cataid" label="分类" min-width="8%" align="center">
								<template slot-scope="scope">
									{{ scope.row.cataname || '-' }}
								</template>
							</el-table-column>
							<el-table-column prop="timePublish" label="发布日期" min-width="10%" align="center">
								<template slot-scope="scope">
									{{ scope.row.timePublish ? scope.row.timePublish.split(" ")[0] : '-' }}
								</template>
							</el-table-column>
							<el-table-column prop="hitnum" label="查看次数" min-width="10%" align="center">
							</el-table-column>
							<el-table-column label="设置" min-width="30%" align="center">
								<template slot-scope="scope">
									<div class="switch-box">
										<div class="switch-item">
											推荐：
											<el-switch v-model="scope.row.isHot" active-color="#13ce66"
												inactive-color="#999" :active-value="1" :inactive-value="0"
												@change="hiddenToggle(scope.row, 'isHot')">
											</el-switch>
										</div>
										<div class="switch-item">
											隐藏：
											<el-switch v-model="scope.row.isHidden" active-color="#13ce66"
												inactive-color="#999" :active-value="1" :inactive-value="0"
												@change="hiddenToggle(scope.row, 'isHidden')">
											</el-switch>
										</div>
									</div>

								</template>
							</el-table-column>
							<el-table-column prop="sort" label="操作" min-width="20%" align="center">
								<template slot-scope="item">
									<el-button type="mini" @click="infoEdit(item.row)">编辑</el-button>
									<el-button type="mini" @click="infoRemove(item.row.id)">删除</el-button>
								</template>
							</el-table-column>
						</el-table>
						<div class="item_bottom">
							<div class="item_num">共{{ total }}条信息</div>
							<div class="item_page">
								<el-pagination background layout="prev, pager, next, jumper" :total="total"
									@current-change="handleCurrentChange">
								</el-pagination>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!-- 主体部分 end -->

		<!-- 尾部 -->
		<template>
			<!-- <Footer></Footer> -->
		</template>
		<!-- 尾部 end -->

		<imgShow ref="imgShow"></imgShow>

	</div>
</template>

<script>
// import Footer from "../../components/footer.vue"
import imgShow from "../../components/imgShow.vue"
import Sortable from 'sortablejs';
import { mapGetters } from "vuex"
export default {
	data() {
		return {
			options: [
				{
					title: "全部",
					sort: "",
				},
				{
					title: "推荐",
					sort: "isHot",
				},
				{
					title: "隐藏",
					sort: "isHidden",
				}
			],
			time: [],
			setOption: "",
			left: 0,

			name: this.$root.ptName,
			picdir: this.$root.ptPicdir,

			mealList: this.$root.mealList,

			table_height: document.documentElement.clientHeight - 290,
			conheight: document.documentElement.clientHeight - 130,
			infoList: [],
			current: 1,
			limit: 10,
			total: 0,

			mealList: this.$root.mealList,

			cataList: [
				{
					id: "0",
					sort: "全部",
				}
			],
			cataId: "",
			keywords: "",
			dataList: [],
			defaultprops: {
				children: 'catalogTreeVos',
				label: 'sort',
				value: 'id',
				checkStrictly: true
			},
		}
	},
	created() {
		let that = this
		this.cataInit()
	},
	components: {
		imgShow
	},
	computed: {
		power() {
			return function (item) {
				let isTrue = null
				isTrue = this.mealList.includes(item)

				return isTrue
			}
		}
	},
	mounted() {
		this.rowDrop();
	},
	methods: {
		// 图片放大
		imgOpen(item) {
			this.$refs.imgShow.open(item.picdirList)
		},

		// 行拖拽
		rowDrop() {
			// 要侦听拖拽响应的DOM对象
			const tbody = document.querySelector('.el-table__body-wrapper tbody');
			const that = this;
			Sortable.create(tbody, {
				// 结束拖拽后的回调函数
				onEnd({ newIndex, oldIndex }) {
					console.log(newIndex, oldIndex)
					console.log(that.dataList)
					that.sortList(newIndex, oldIndex)
				}
			})
		},

		sortList(newIndex, oldIndex) {
			this.$http({
				url: this.$api.cntSort,
				method: "post",
				data: [
					{
						id: this.dataList[newIndex].id,
						orderid: this.dataList[oldIndex].orderid,
					},
					{
						id: this.dataList[oldIndex].id,
						orderid: this.dataList[newIndex].orderid,
					}
				]
			}).then(res => {
				if (res.data.data.code == 20000) {
					let oldorderid = this.dataList[oldIndex].orderid;
					let neworderid = this.dataList[newIndex].orderid;
					this.dataList[newIndex].orderid = oldorderid;
					this.dataList[oldIndex].orderid = neworderid;
				}
			})
		},

		hiddenToggle(item, val) {
			this.$http({
				url: this.$api.cntUpdate,
				method: 'post',
				data: {
					orderid: item.orderid,
					title: item.title,
					cataid: item.cataid,
					id: item.id,
					[val]: item[val]
				}
			}).then(res => {
				if (res.data.code == 20000) {
					this.$message.success(res.data.message)
				} else {
					this.$message.error(res.data.message);
					item[val] = item[val] == 0 ? 1 : 0
				}
			})
		},

		search() {
			this.current = 1;
			this.data_init()
		},

		// 跳转内容管理目录列表
		sort_edit() {
			this.$router.push('/sort')
		},

		// 跳转增加
		info_add() {
			this.$router.push('/info/add')
		},

		// 加载列表数据
		data_init() {
			let option = {};
			if (this.setOption) {
				let key = this.options.find(v => v.title == this.setOption).sort
				key ? option[key] = 1 : ""
			}
			this.$http({
				'method': 'post',
				'url': this.$api.cntList,
				data: {
					current: this.current,
					limit: this.limit,
					keywords: this.keywords,
					cataid: this.cataId[this.cataId.length - 1] && this.cataId[this.cataId.length - 1] != '0' ? this.cataId[this.cataId.length - 1].toString() : null,
					time1: this.time && this.time.length > 0 ? this.time[0] : null,
					time2: this.time && this.time.length > 0 ? this.time[1] : null,
					...option
				}
			}).then(res => {
				if (res.data.code == 20000) {
					const list = res.data.data.list
					console.log(this.cataList)
					list.map(item => {
						item.cataName = this.getSortName(this.cataList, item.cataid)
						return item
					})
					this.total = res.data.data.total
					this.dataList = list;
					console.log(list)
				}
			})
		},

		getSortName(list, id) {
			if (!id) return;
			for (let i = 0; i < list.length; i++) {
				if (list[i].cataid == id) {
					return list[i].sort;
				} else {
					if (list[i].catalogTreeVos && list[i].catalogTreeVos.length > 0) {
						this.getSortName(list[i].catalogTreeVos, id)
					}
				}
			}
		},

		// 列表数据分页
		handleCurrentChange: function (currentPage) {
			this.current = currentPage
			this.data_init();
		},

		handleSizeChange(e) {
			console.log(e)
		},

		// 列表数据删除
		infoRemove(id) {
			this.$confirm('是否删除这条数据?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.$http({
					'method': 'get',
					'url': this.$api.cntRemove + id
				}).then(res => {
					if (res.data.code == 20000) {
						this.$message({
							type: 'success',
							message: res.data.message
						});
						this.data_init()
					} else {
						this.$message.error(res.data.message)
					}
				})

			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消删除'
				});
			});
		},

		// 列表数据修改
		infoEdit(item) {
			this.$router.push('/info/update')
			this.$store.commit("setUrlParma", { id: item.id })
		},

		cataInit() {
			this.$http({
				url: this.$api.cataList,
			}).then(res => {
				if (res.data.code == 20000) {
					let list = this.getTree(res.data.data.items)
					this.cataList.push(...list);
					this.data_init()
				}
			})
		},
		// 筛选空列表
		getTree(list) {
			let listMap = list.map(item => {
				item.catalogTreeVos = item.catalogTreeVos && item.catalogTreeVos.length > 0 ? this.getTree(item.catalogTreeVos) : null
				return item
			})
			return listMap
		},
		to_exit() {
			this.$router.push('/index')
		},

	}

}
</script>

<style scoped>
@import url("../../assets/css/info.css");
@import url("../../assets/css/infoEdit.css");
.main_con {
	width: 100%;
}

.header {
	background-color: #fff;
}

.box_btn {
	display: flex;
}

.item {
	position: relative;
}

.item_btn {
	position: absolute;
	display: flex;
	right: 20px;
	bottom: 0px;
}

.item_btn>>>.el-button {
	color: #999999;
}

.item_btn>>>.el-button:hover {
	opacity: 0.8;
}

.h_user * {
	cursor: pointer;
}

.switch-box {
	width: 100%;
	display: flex;
	flex-flow: wrap;
	margin-left: -10px;
	margin-bottom: -5px;
	justify-content: center;
}

.switch-item {
	margin-left: 10px;
	margin-bottom: 5px;
}
</style>
